<template>
  <view>
    <my-navbar
      leftText="选择优惠券"
      @leftClick="back"
      :rightText="nav.text"
      :rightColor="nav.color"
      @rightClick="submit"
    ></my-navbar>
    <view class="content">
      <u-radio-group @change="radioGroupChange" v-model="value">
        <u-radio
          @change="radioChange"
          v-for="(item, index) in list"
          :name="item.id"
          :key="index"
          :disabled="item.checked"
          active-color="#4FA388"
        >
          <view class="copon_box copon flex-btw">
            <view class="left flex-center" v-if="item.coupons.type">{{
              item.coupons.type == 1 ? "普通券" : "现金券"
            }}</view>

            <view class="center flex-btw">
              <view class="center_left">
                <view class="price">￥{{ item.coupons.money }}</view>
                <view
                  class="info"
                  @click.stop="alertInfo(item.coupons.describe)"
                >
                  <u-icon name="question-circle"></u-icon>
                  <text class="info_text">使用说明</text>
                </view>
              </view>
              <view class="center_right">
                <view class="rule" v-if="item.coupons.type == 1"
                  >满{{ item.coupons.order_money_limit }}使用</view
                >
                <view class="rule" v-else-if="item.coupons.type == 2"
                  >无门槛</view
                >
                <view class="limit" v-if="item.coupons.get_limit"
                  >每位用户限制{{ item.coupons.get_num }}张</view
                >
                <view class="limit" v-else>不限量</view>
                <view
                  class="time flex-center"
                  v-if="item.coupons.expire_type == 1"
                  >{{ parseTime(item.coupons.start_time) }}~{{
                    parseTime(item.coupons.end_time)
                  }}</view
                >
                <view
                  class="time flex-center"
                  v-else-if="item.coupons.expire_type == 2"
                  >限{{ item.coupons.expire_days }}天内使用</view
                >
              </view>
            </view>
            <view class="right">去使用</view>
          </view>
        </u-radio>
      </u-radio-group>
    </view>
    <u-modal
      v-model="info.show"
      :content="info.value"
      title="使用说明"
      confirm-color="#4FA388"
    ></u-modal>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
export default {
  computed: {
    ...mapState(["getSubOrdCou"]),
  },
  data() {
    return {
      value: "",
      nav: {
        text: "确定",
        color: "#4FA388",
      },
      page: 1,
      count: 0,
      list: [],
      info: {
        value: "",
        show: false,
      },
      nowSelect: null,
      supplier_id: null,
    };
  },
  onShow() {
    this.supplier_id = this.getSubOrdCou.supplier_id;
  },
  onLoad() {
    this.getData(1);
  },

  onHide() {
    // uni.$off("getSubOrdCou", (data) => {});
  },

  methods: {
    getData(page) {
      var params = {
        size: 20,
        page,
        status: 0,
      };
      $https("GET", "getMyCouponsList", params, (res) => {
        if (res.data.errcode == 0) {
          this.page = page;

          if (page == 1) {
            this.list = res.data.data.list;
            // this.nowSelect = this.list[0].id;
          } else {
            let oldData = this.list;
            let sule = res.data.data.list;
            this.list = oldData.concat(sule);
          }
          // console.log("this.list", this.list, this.supplier_id);
          this.count = res.data.data.count;
          const resu = this.list.filter((item) => {
            return item.company_id == this.supplier_id;
          });
          this.list = resu[0].coupons_list;

          this.list = this.list.map((item) => {
            const sulet = {
              checked: false,
              // shows: false,
            };
            item = { ...sulet, ...item };
            return item;
          });

          console.log("thislist2222", this.list);
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    showList(data) {
      // const { couponInfo, companyInfo } = data;
      // this.supplier_id = companyInfo.supplier_id;
      // this.list = couponInfo.coupons_list;
      // this.nowSelect = couponInfo.coup_id;
      // console.log("this.supplier_id", this.supplier_id, this.list, couponInfo);
    },
    submit() {
      console.log("1111111111", this.value);
      uni.$emit("selectCoupon", { id: this.value });
      uni.navigateBack();
    },

    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      // console.log("单条", e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log("任一", e, this.list, this.value);
    },

    alertInfo(info) {
      this.info.value = info;
      this.info.show = true;
    },
    parseTime(time) {
      time = time * 1000;
      var date = new Date(time);
      var year = date.getFullYear(),
        month =
          date.getMonth() + 1 < 9
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        day = date.getDate() < 9 ? "0" + date.getDate() : date.getDate();
      return `${year}-${month}-${day}`;
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
  // onReachBottom(){
  // 	if(this.list.length<this.count){
  // 		this.page++;
  // 		this.getData(this.page);
  // 	}
  // },
};
</script>

<style lang="scss">
/deep/.uicon-checkbox-mark:before {
  transform: scale(0.7);
}
.content {
  padding: 20rpx 15rpx;
  .u-radio {
    margin: auto;
  }
  .copon_box {
    width: 638rpx;
    height: 164rpx;
    background: url(../../../static/image/coupon.png) no-repeat;
    background-size: 100% 100%;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
    .left {
      min-height: 150rpx;
      width: 40rpx;
      word-wrap: wrap;
      font-size: 28rpx;
      line-height: 35rpx;
      border-radius: 4rpx;
      text-align: center;
      padding: 10rpx 0;
      transform: scale(0.8);
    }
    .right {
      width: 40rpx;
      word-wrap: wrap;
      font-size: 22rpx;
      line-height: 26rpx;
      border: 1px solid #fff;
      border-radius: 6rpx;
      text-align: center;
      padding: 10rpx 0;
      margin-left: 40rpx;
    }
    .center {
      flex: 1;
      .center_left {
        text-align: center;
        width: 50%;
        .price {
          font-size: 40rpx;
          font-weight: bold;
        }
        .info {
          color: #a4a4a4;
          font-size: 16rpx;
          .info_text {
            text-decoration: underline;
            margin-left: 4rpx;
          }
        }
      }
      .center_right {
        text-align: center;
        width: 50%;
        .rule {
          font-size: 24rpx;
        }
        .limit {
          font-size: 16rpx;
          transform: scale(0.8);
        }
        .time {
          font-size: 12rpx;
          border-radius: 16rpx;
          padding: 4rpx;
          transform: scale(0.7);
        }
      }
    }
    &.copon {
      .left {
        background: #f6d32d;
        color: #c6272a;
      }
      .right {
        color: #f6d32d;
        border-color: #f6d32d;
      }
      .center_left {
        .price {
          color: #c6272a;
        }
      }
      .center_right {
        color: #757575;
        .rule {
          color: #191919;
        }
        .time {
          background: #e9adae;
        }
      }
    }
    &.copon_used {
      background: url(../../../static/image/coupon_used.png) no-repeat 100% 100%;
      .left,
      .right {
        background: #cccccc;
        color: #787878;
        border-color: #b3b3b3;
      }
      .center_left {
        .price {
          color: #cccccc;
        }
      }
      .center_right {
        color: #cccccc;
        .rule {
          color: #cccccc;
        }
        .time {
          background: #ececec;
        }
      }
    }
  }
}
</style>
<!-- <style lang="scss">
/deep/.uicon-checkbox-mark:before{
	transform: scale(.7);
}
.content{
	// #ifdef MP-WEIXIN
		padding:20rpx 56rpx;
	// #endif
	// #ifndef MP-WEIXIN
		padding:20rpx 0;
	// #endif
	.u-radio{
		margin:auto;
	}
	.copon_box{
// #ifdef MP-WEIXIN
		width:584rpx;
		height:152rpx;
// #endif
// #ifndef MP-WEIXIN
		width:638rpx;
		height:164rpx;
// #endif
		background:url(../../../static/image/coupon.png) no-repeat 100% 100%;
		padding:0 30rpx;
		margin-bottom:20rpx;
		.left{
			min-height: 150rpx;
			width:40rpx;
			word-wrap: wrap;
			font-size: 28rpx;
			line-height: 35rpx;
			border-radius:4rpx;
			text-align: center;
			padding:10rpx 0;
			transform: scale(0.8);
		}
		.right{
			width:46rpx;
			word-wrap: wrap;
			font-size: 22rpx;
			line-height: 26rpx;
			border:1px solid #fff;
			border-radius:6rpx;
			text-align: center;
			padding:10rpx 0;
			margin-left:30rpx;
		}
		.center{
			flex:1;
			.center_left{
				text-align: center;
				width:50%;
				.price{
					font-size: 40rpx;
					font-weight: bold;
				}
				.info{
					color:#A4A4A4;
					font-size: 16rpx;
					.info_text{
						text-decoration: underline;
						margin-left:4rpx;
					}
				}
			}
			.center_right{
				text-align: center;
				width:50%;
				.rule{
					font-size: 24rpx;
				}
				.limit{
					font-size: 16rpx;
					// #ifndef MP-WEIXIN
					transform: scale(.8);
					// #endif
				}
				.time{
					font-size:16rpx ;
					border-radius: 16rpx;
					padding:4rpx;
					// #ifndef MP-WEIXIN
					transform: scale(.7);
					line-height: 22rpx;
					// #endif
					// #ifdef MP-WEIXIN
					transform: scale(0.9);
					// #endif
				}
			}
		}
		&.copon{
			.left{
				background:#F6D32D;
				color:#C6272A;
			}
			.right{
				color:#F6D32D;
				border-color: #F6D32D;
			}
			.center_left{
				.price{
					color:#c6272a;
				}
			}
			.center_right{
				color:#757575;
				.rule{
					color:#191919;
				}
				.time{
					background:#E9ADAE;
				}
			}
		}
		&.copon_used{
			background:url(../../../static/image/coupon_used.png) no-repeat 100% 100%;
			.left,.right{
				background:#CCCCCC;
				color:#787878;
				border-color:#B3B3B3;
			}
			.center_left{
				.price{
					color:#CCCCCC;
				}
			}
			.center_right{
				color:#CCCCCC;
				.rule{
					color:#CCCCCC;
				}
				.time{
					background:#ECECEC;
				}
			}
		}
	}
}
</style>
 -->